<template>
  <hry-header title="安全中心" :showBackBtn="true">
    <div slot="content" class="home form-wrapper">
      <md-field>
        <md-cell-item title="身份证" :addon="data.certificate" no-border>
        </md-cell-item>
      </md-field>
      <div class="common-style"></div>
      <md-field>
        <md-cell-item
          v-if="data.yunmobile"
          title="修改认证手机"
          @click="$commonJs.goPage('personUnbindingAthPhone')"
          :addon="data.yunmobile"
          arrow
        />
        <md-cell-item
          v-else
          title="认证手机"
          @click="$commonJs.goPage('personResetAthPhone')"
          addon="尚未认证"
          arrow
        />
        <md-cell-item
          title="修改登录手机"
          @click="$commonJs.goPage('personResetLoginPhone')"
          :addon="data.mobile"
          arrow
        />
        <md-cell-item
          :title="isSetPay ? '重置支付密码' : '设置支付密码'"
          @click="$commonJs.goPage('personResetPayPsw')"
          arrow
        />
        <md-cell-item
          title="修改登录密码"
          @click="$commonJs.goPage('personResetLoginPsw')"
          arrow
        />
      </md-field>
    </div>
  </hry-header>
</template>

<script>
import "@/assets/fonticon/iconfont.css";
import { Field, CellItem } from "mand-mobile";
import { Avatar } from "ant-design-vue";
export default {
  name: "index",
  components: {
    [Field.name]: Field,
    [CellItem.name]: CellItem,
    [Avatar.name]: Avatar,
    hryHeader: () => import("@/components/contentWrapper/index")
  },
  data() {
    return {
      data: {}
    };
  },
  methods: {
    safeData() {
      this.$ajax
        .get(this.$api.safeData)
        .then(res => {
          this.data = res.data;
        })
        .catch(err => {
          this.$message.error(err);
        });
    }
  },
  computed: {
    isSetPay() {
      return this.$store.state.isSetPay;
    }
  },
  created() {
    this.safeData();
  }
};
</script>

<style scoped lang="less"></style>
